<template>
  <div class="mod-config">
    <basic-container>
      <div v-if="showH == 2" class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">指标审核</div>
        </div> -->
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <div class="flex">
              <div>
                <el-form :model="form" :inline="true" class="form-inline">
                  <el-form-item label="被考核人姓名">
                    <el-input
                      v-model="form.bkhName"
                      placeholder="被考核人姓名"
                      style="width: 160px"
                      :clearable="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="被考核人职务">
                    <el-input
                      v-model="form.bkhZhiwu"
                      placeholder="被考核人职务"
                      style="width: 160px"
                      :clearable="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      icon="el-icon-search"
                      type="primary"
                      class="marginLeft"
                      @click="getDataList"
                      >检索</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <div style="border-top: 1px solid #b0bde2">
          <div class="mt10">
            重点任务
            <span>
              <el-radio v-model="radio" label="1">个人</el-radio>
              <el-radio v-model="radio" label="2">机构</el-radio>
            </span>
            <span
              style="margin-left: 160px"
              v-if="permissions.hetongrenwu_hetonghtxxdjb_scope"
            >
              数据范围
              <el-radio-group v-model="radioTwo">
                <el-radio v-for="item in radioTwoList" :label="item.value">{{
                  item.name
                }}</el-radio>
              </el-radio-group>
            </span>
            <div style="float: right">
              <el-button
                type="primary"
                @click="okAll"
                v-loading.fullscreen.lock="fullscreenLoading"
                >批量同意</el-button
              >
              <el-button
                type="primary"
                @click="backAll"
                v-loading.fullscreen.lock="fullscreenLoading2"
                >批量驳回</el-button
              >
              <el-button type="primary" @click="fnBackLastzbPage"
                >返回</el-button
              >
            </div>
          </div>
        </div>
        <el-table
          :data="dataList"
          style="width: 100%; margin-top: 20px"
          height="60vh"
          ref="tableRef"
        >
          <el-table-column
            :selectable="checkboxSelect"
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="bkhName"
            label="被考核人姓名"
            min-width="120"
            show-overflow-tooltip
            header-align="center"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="zhibiaoType" label="指标类别" min-width="120" header-align="center" align="center"></el-table-column> -->
          <el-table-column
            prop="renwuName"
            label="任务名称"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="weightset"
            label="权重"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dataProvider"
            label="数据提供部门/人"
            min-width="120"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.tgLx == '2'">{{
                scope.row.targetUserName
              }}</span>
              <span v-else>{{ scope.row.dataProvider }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="状态"
            min-width="120"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus == '0'">待审批</span>
              <span v-if="scope.row.auditStatus == '2'">通过</span>
              <span v-if="scope.row.auditStatus == '1'">驳回</span>
            </template>
          </el-table-column>
          <!--                <el-table-column label="操作" width="160" header-align="center" fixed="right" align="center" >-->
          <!--                    <template slot-scope="scope">-->
          <!--                        <el-button v-if="scope.row.auditStatus == '0'" plain type="primary" @click="ok(scope.row.id)">同意</el-button>-->
          <!--                        <el-button v-if="scope.row.auditStatus == '0'" plain type="primary" @click="back(scope.row.id)">驳回</el-button>-->
          <!--                    </template>-->
          <!--                </el-table-column>-->
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  getPage,
  okAllzb,
  backAllzb,
} from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
import { radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import { validatenull } from "@/util/validate";
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      form: {},
      radio: "1",
      radioTwo: "-1",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchadvanced: true,
      searchheight: "0",
      radioTwoList: radioTwoList,
      showH: 1,
      renwuId: "",
      fullscreenLoading: false,
      fullscreenLoading2: false,
      hetongzhibiaoTable: {
        lastPage: "zbsh",
        showSearch: true,
        pageTitle: "业绩合同",
        showBackBtn: false,
      },
    };
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo = params.radioTwo;
    }
    //console.log(JSON.stringify(this.zbdetail))
    // this.getDataList()
  },
  watch: {
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
    radioTwo(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    //返回到合同创建页面
    fanHu() {
      this.showH = 1;
    },
    //从合同创建跳转过来执行的方法
    init(data) {
      //console.log(JSON.stringify(data)+"--==d");
      if (data) {
        //console.log(data.renwuId+"===")
        this.showH = 2;
        this.renwuId = data.renwuId;
        this.getDataList();
      }
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    //搜索
    search() {
      this.getDataList();
    },
    //获取指标列表
    getDataList() {
      getPage(
        Object.assign(
          {
            type: this.radio,
            isbenbu: this.radioTwo,
            renwuId: this.renwuId,
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.form
        )
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    ok(id) {
      this.$confirm("是否要通过该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          okApi(id)
            .then((res) => {
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    back(id) {
      this.$confirm("是否要驳回该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          backApi(id)
            .then((res) => {
              this.$message({
                type: "success",
                message: "驳回成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    //批量通过
    okAll() {
      const rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        this.$confirm("是否要通过" + rows.length + "条指标?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.fullscreenLoading = true;
            okAllzb(rows)
              .then((res) => {
                this.$message({
                  type: "info",
                  message: res.data.data + "条任务已通过",
                });
                this.fullscreenLoading = false;
                this.getDataList();
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoading = false;
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请选择指标通过!",
        });
      }
    },
    //批量驳回
    backAll() {
      const rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        this.$confirm("是否要驳回" + rows.length + "条指标?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.fullscreenLoading2 = true;
            backAllzb(rows)
              .then((res) => {
                this.$message({
                  type: "info",
                  message: res.data.data + "条指标已驳回",
                });
                this.fullscreenLoading2 = false;
                this.getDataList();
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoading2 = false;
                this.getDataList();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请选择指标驳回!",
        });
      }
    },
    checkboxSelect(row, rowIndex) {
      if (row.auditStatus == "0") {
        return true;
      } else {
        return false;
      }
    },
    fnBackLastzbPage(type) {
      this.$emit("fnBackLastzbPage", "返回原页面");
    },
  },
};
</script>

<style>
</style>
